<template>
  <el-container>
    <el-header>
      <el-page-header :content="form.name" @back="goBack"> </el-page-header>
      <div class="do">
        <el-button type="primary" @click="exportJson">export JSON</el-button>
        <el-button type="primary" @click="handleSave" :loading="isSaveing"
          >保 存</el-button
        >
      </div>
    </el-header>
    <el-main>
      <el-divider content-position="left">基础信息</el-divider>
      <div class="formBox">
        <el-form
          :model="form"
          :rules="rules"
          ref="addForm"
          :disabled="mode == 'show'"
          label-width="100px"
          label-position="right"
          class="noFlex"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入工作流名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="form.type"
              filterable
              clearable
              style="width: 100%"
              placeholder="请选择岗位类型"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="条件字段" prop="field">
            <el-input
              v-model="form.field"
              clearable
              placeholder="请输入工作流名称"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="是否默认" prop="defaultOrNot">
            <!-- 0否，1是 -->
            <el-switch
              v-model="form.defaultOrNot"
              :inactive-value="0"
              :active-value="1"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <!-- 0禁用,1开启 -->
            <el-switch
              v-model="form.state"
              :inactive-value="0"
              :active-value="1"
            />
          </el-form-item>
          <el-form-item label="是否免审" prop="state">
            <!-- 0,不免，1免审 -->
            <el-switch
              v-model="form.exempt"
              :inactive-value="0"
              :active-value="1"
            />
          </el-form-item>
        </el-form>
      </div>
      <el-divider content-position="left">工作流配置</el-divider>
      <sc-workflow v-model="data.nodeConfig"></sc-workflow>
    </el-main>
  </el-container>
</template>

<script>
import scWorkflow from '@/components/scWorkflow'
import { queryTypeByDic } from '@/utils/getData'
export default {
  name: 'workflow',
  components: {
    scWorkflow
  },
  data () {
    return {
      data: {
        "id": 1,
        "name": "请假审批",
        "nodeConfig": {
          "nodeName": "发起人",
          "type": 0,
          "nodeRoleList": [],
          "childNode": {
            //   "nodeName": "条件路由",
            //   "type": 4,
            //   "conditionNodes": [{
            //     "nodeName": "长期",
            //     "type": 3,
            //     "priorityLevel": 1,
            //     "conditionMode": 1,
            //     "conditionList": [{
            //       "label": "请假天数",
            //       "field": "day",
            //       "operator": ">",
            //       "value": "7"
            //     }],
            //     "childNode": {
            //       "nodeName": "领导审批",
            //       "type": 1,
            //       "setType": 1,
            //       "nodeUserList": [{
            //         "id": "360000197302144442",
            //         "name": "何敏"
            //       }],
            //       "nodeRoleList": [],
            //       "examineLevel": 1,
            //       "directorLevel": 1,
            //       "selectMode": 1,
            //       "termAuto": false,
            //       "term": 0,
            //       "termMode": 1,
            //       "examineMode": 1,
            //       "directorMode": 0
            //     }
            //   },
            //   {
            //     "nodeName": "短期",
            //     "type": 3,
            //     "priorityLevel": 2,
            //     "conditionMode": 1,
            //     "conditionList": [],
            //     "childNode": {
            //       "nodeName": "直接主管审批",
            //       "type": 1,
            //       "setType": 2,
            //       "nodeUserList": [],
            //       "nodeRoleList": [],
            //       "examineLevel": 1,
            //       "directorLevel": 1,
            //       "selectMode": 1,
            //       "termAuto": false,
            //       "term": 0,
            //       "termMode": 1,
            //       "examineMode": 1,
            //       "directorMode": 0
            //     }
            //   }
            //   ],
            //   "childNode": {
            //     "nodeName": "抄送人",
            //     "type": 2,
            //     "userSelectFlag": true,
            //     "nodeUserList": [{
            //       "id": "220000200908305857",
            //       "name": "何秀英"
            //     }]
            //   }
          }
        }
      },
      //表单数据
      form: {
        name: '审批',
        type: '',
        defaultOrNot: 0,//是否默认
        state: 1,//状态
        exempt: 0,//是否免审
        jsonConfig: ''
      },
      typeOptions: [],
      //验证规则
      rules: {
        name: [
          { required: true, message: '请输入工作流名称' }
        ],
        type: [
          { required: true, message: '请选择工作流类型', trigger: 'change' }
        ],
      },
      tagList: this.$store.state.viewTags.viewTags,
      isSaveing: false,
      mode: null
    }
  },
  mounted () {
    this.mode = this.$route.query.mode
    if (this.mode == 'edit') {
      this.form = JSON.parse(localStorage.getItem('workflowItem'))
      this.data.nodeConfig = JSON.parse(this.form.jsonConfig)
    }

    queryTypeByDic('streamCode').then(res => {
      this.typeOptions = res
    })

  },
  unmounted () {
    localStorage.removeItem('workflowItem')
  },
  methods: {
    handleSave () {
      if (this.mode == 'add') {
        this.add()
      } else if (this.mode == 'edit') {
        this.edit()
      }
    },
    // 添加
    async add () {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          this.form.jsonConfig = JSON.stringify(this.data.nodeConfig)
          let res = await this.$API.workflow.addtWorkflow.post(this.form)
          this.isSaveing = false
          if (res.code == 200) {
            this.$message.success("操作成功")
            this.goBack()
          }
        } else {
          return false
        }
      })
    },
    // 编辑
    async edit () {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          this.form.jsonConfig = JSON.stringify(this.data.nodeConfig)
          let res = await this.$API.workflow.updateWorkflow.post(this.form)
          this.isSaveing = false
          if (res.code == 200) {
            this.$message.success("操作成功")
            this.goBack()
          }
        } else {
          return false
        }
      })

    },
    exportJson () {
      this.$message("返回值请查看F12控制台console.log()")
      console.log(this.data)
    },
    // 返回
    goBack () {
      this.closeSelectedTag(this.$route)
      this.$router.push({
        path: '/auth/checkRule'
      })

    },
    //关闭tag
    closeSelectedTag (tag) {
      this.$store.commit("removeViewTags", tag)
      this.$store.commit("removeIframeList", tag)
      this.$store.commit("removeKeepLive", tag.name)
    },
  }
}
</script>

<style lang='scss' scoped>
.el-main {
  // display: flex;
  :deep(.el-divider__text) {
    padding: 0 10px;
    font-size: 18px;
    // font-weight: 600;
    background-color: #f6f8f9;
  }
  .formBox {
    // width: 20%;
    padding: 30px;
    margin-bottom: 50px;
    background: #fff;
    .el-form {
      width: 30%;
    }
  }
}
</style>
